<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Css Grid</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/demoPage.css" />
		<link rel="stylesheet" type="text/css" href="css/board.css" />
		<link rel="stylesheet" type="text/css" href="css/chess.css" />
		<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
		<script type="text/javascript" src="js/lasker-0.1.0.js"></script>
		<script type="text/javascript" src="js/jqueryui/jquery-ui-personalized-1.6rc5.min.js"></script>		
		<script type="text/javascript">
			var clickCount;
			clickCount=0;
			 var outside;
		</script>
    </head>
    <body>
    	<div id="block1">
			<table id="customwarsboard" summary="An example playing field" cellpadding="0" cellspacing="0" >
				<colgroup>  
					<col id="col-key-first" />  
					<col id="col-key1" />  
					<col id="col-key2" />  
					<col id="col-key3" />  
					<col id="col-key4" />  
					<col id="col-key5" />  
					<col id="col-key6" />  
					<col id="col-key7" />  
					<col id="col-key8" />  
					<col id="col-key-last" />  
				</colgroup>  
		         
				<thead>  
					<tr>  
						<th scope="col" class="col" id="top-right"></th>  
						<th scope="col" class="col" id="top0">a</th>  
						<th scope="col" class="col" id="top1">b</th>  
						<th scope="col" class="col" id="top2">c</th>  
						<th scope="col" class="col" id="top3">d</th>  
						<th scope="col" class="col" id="top4">e</th>  
						<th scope="col" class="col" id="top5">f</th>  
						<th scope="col" class="col" id="top6">g</th>  
						<th scope="col" class="col" id="top7">h</th>  
						<th scope="col" class="col" id="top-left"></th>  
					</tr>  
				</thead>  
	
				<tfoot>  
					<tr>  
						<th scope="col" class="col" id="bottom-right"></th>  
						<th scope="col" class="col" id="foot0">a</th>  
						<th scope="col" class="col" id="foot1">b</th>  
						<th scope="col" class="col" id="foot2">c</th>  
						<th scope="col" class="col" id="foot3">d</th>  
						<th scope="col" class="col" id="foot4">e</th>  
						<th scope="col" class="col" id="foot5">f</th>  
						<th scope="col" class="col" id="foot6">g</th>  
						<th scope="col" class="col" id="foot7">h</th>  
						<th scope="col" class="col" id="bottom-left"></th>  
					</tr>  
				</tfoot>  
	
		
				<tbody>  
					<tr id="y7">  
						<th scope="row">8</th>    
						<td id="x0y7" class="white"><img class="rook" src="img/chess/white/rook.png" /></td>    
						<td id="x1y7" class="black"><img class="knight" src="img/chess/white/knight.png" /></td>    
						<td id="x2y7" class="white"><img class="bishop" src="img/chess/white/bishop.png" /></td>    
						<td id="x3y7" class="black"><img class="queen" src="img/chess/white/queen.png" /></td>    
						<td id="x4y7" class="white"><img class="king" src="img/chess/white/king.png" /></td>    
						<td id="x5y7" class="black"><img class="bishop" src="img/chess/white/bishop.png" /></td>    
						<td id="x6y7" class="white"><img class="knight" src="img/chess/white/knight.png" /></td>    
						<td id="x7y7" class="black"><img class="rook" src="img/chess/white/rook.png" /></td>    
						<th scope="row">8</th>    
					</tr>  
					<tr id="y6">  
						<th scope="row">7</th>    
						<td id="x0y6" class="black"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x1y6" class="white"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x2y6" class="black"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x3y6" class="white"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x4y6" class="black"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x5y6" class="white"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x6y6" class="black"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<td id="x7y6" class="white"><img class="pawn" src="img/chess/white/pawn.png" /></td>    
						<th scope="row">7</th>    
					</tr>  
					<tr id="y5">  
						<th scope="row">6</th>    
						<td id="x0y5" class="white"></td>    
						<td id="x1y5" class="black"></td>    
						<td id="x2y5" class="white"></td>    
						<td id="x3y5" class="black"></td>    
						<td id="x4y5" class="white"></td>    
						<td id="x5y5" class="black"></td>    
						<td id="x6y5" class="white"></td>    
						<td id="x7y5" class="black"></td>    
						<th scope="row">6</th>    
					</tr>  
					<tr id="y4">  
						<th scope="row">5</th>    
						<td id="x0y4" class="black"></td>    
						<td id="x1y4" class="white"></td>    
						<td id="x2y4" class="black"></td>    
						<td id="x3y4" class="white"></td>    
						<td id="x4y4" class="black"></td>    
						<td id="x5y4" class="white"></td>    
						<td id="x6y4" class="black"></td>    
						<td id="x7y4" class="white"></td>    
						<th scope="row">5</th>    
					</tr>  
					<tr id="y3">  
						<th scope="row">4</th>    
						<td id="x0y3" class="white"></td>    
						<td id="x1y3" class="black"></td>    
						<td id="x2y3" class="white"></td>    
						<td id="x3y3" class="black"></td>    
						<td id="x4y3" class="white"></td>    
						<td id="x5y3" class="black"></td>    
						<td id="x6y3" class="white"></td>    
						<td id="x7y3" class="black"></td>    
						<th scope="row">4</th>    
					</tr>  
					<tr id="y2">  
						<th scope="row">3</th>    
						<td id="x0y2" class="black"></td>    
						<td id="x1y2" class="white"></td>    
						<td id="x2y2" class="black"></td>    
						<td id="x3y2" class="white"></td>    
						<td id="x4y2" class="black"></td>    
						<td id="x5y2" class="white"></td>    
						<td id="x6y2" class="black"></td>    
						<td id="x7y2" class="white"></td>    
						<th scope="row">3</th>    
					</tr>  
					<tr id="y1">  
						<th scope="row">2</th>    
						<td id="x0y1" class="white"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x1y1" class="black"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x2y1" class="white"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x3y1" class="black"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x4y1" class="white"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x5y1" class="black"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x6y1" class="white"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<td id="x7y1" class="black"><img class="pawn" src="img/chess/black/pawn.png" /></td>    
						<th scope="row">2</th>    
					</tr>  
					<tr id="y0">  
						<th scope="row">1</th>    
						<td id="x0y0" class="black"><img class="rook" src="img/chess/black/rook.png" /></td>    
						<td id="x1y0" class="white"><img class="knight" src="img/chess/black/knight.png" /></td>    
						<td id="x2y0" class="black"><img class="bishop" src="img/chess/black/bishop.png" /></td>    
						<td id="x3y0" class="white"><img class="king" src="img/chess/black/king.png" /></td>    
						<td id="x4y0" class="black"><img class="queen" src="img/chess/black/queen.png" /></td>    
						<td id="x5y0" class="white"><img class="bishop" src="img/chess/black/bishop.png" /></td>    
						<td id="x6y0" class="black"><img class="knight" src="img/chess/black/knight.png" /></td>    
						<td id="x7y0" class="white"><img class="rook" src="img/chess/black/rook.png" /></td>    
						<th scope="row">1</th>
					</tr>  
		        </tbody>     
	 	</table>
		<div id="happyPath">
			<h2>Happy Path</h2>
			<p>x4y1</p>
			<p>x4y3</p>
		</div>
	</div>
	<div id="block2">
		<div id="messages">
			<p></p>
		</div>
		<div id="messagesHistory">
			<p></p>
		</div>
	</div>
	</body>
</html>
